<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>可用余额</title>
    <link href="../../../css/style.css" rel="stylesheet" type="text/css">
    <link href="../../../css/mui.css" rel="stylesheet" type="text/css">
    <style>
        body {
            background: #fff!important;
        }
        
        .chargeshadow {}
        
        .chargeTop {
            width: 100%;
            height: 40px;
        }
        
        .paytop {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            background: #fff;
            padding: 10px;
        }
        
        .paytop li {
            margin-bottom: 20px;
        }
        
        .paytop li span {
            color: #7b7b7b;
        }
        
        .chargebg {
            background: #f1f1f1;
        }
        
        .chargeContent {
            /* position: absolute;
            width: 90%;
            left: 5%;
            top: 0;
            font-size: 14px; */
            background-color: #ffffff;
        }
        
        .bg img {
            width: 100%;
        }
        
        .bg {
            height: 20px;
        }
        
        .gold {
            background: #f8f8f8;
            text-align: center;
            padding: 20px 0;
        }
        
        .gold img {
            width: 30%;
        }
        
        .bgb {
            height: 42px;
        }
        
        .bgb img {
            width: 100%;
            height: 42px;
        }
        
        .payUl {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        
        .mui-card {
            box-shadow: none;
        }
        
        .mui-card .mui-radio img {
            width: 20px;
            margin-right: 10px;
            margin-top: 2px;
        }
        
        .mui-input-row label {
            width: 100%;
            padding: 0;
        }
        
        .mui-input-group .mui-input-row {
            padding: 15px 0;
            height: 50px;
        }
        
        .mui-input-group .mui-input-row:after {
            left: 0;
        }
        
        .mui-radio input[type='radio'],
        .mui-checkbox input[type='checkbox'] {
            width: 20px;
            height: 20px;
        }
        
        .mui-radio input[type='radio'],
        .mui-checkbox input[type='checkbox'] {
            right: 0;
            top: 15px;
            font-size: 20px;
        }
        
        .paytitle {
            color: #999;
            border-bottom: solid 1px #F1F1F1;
            width: 100%;
            display: block;
            padding-bottom: 10px;
        }
        
        .mui-radio input[type='radio']:before {
            font-size: 20px;
        }
        
        .mui-radio input[type=radio]:checked:before {
            content: '\e442';
            color: #00b5fa;
            font-size: 20px;
        }
        
        .patbtn {
            text-align: center;
            background: #54d7ff;
            border-radius: 100px;
            margin: 0 auto;
            height: 40px;
            line-height: 40px;
            color: #fff;
            margin-top: 40px;
            margin-bottom: 40px;
            width: 80%;
        }
        
        .newpayment {
            padding: 30px;
            padding-bottom: 0px;
        }
        
        .headertitles {
            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
        }
        
        .listss li {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
        
        .listss li span {
            font-size: 14px;
        }
        
        .listss li span:nth-child(1) {
            width: 50%;
            text-align: left;
        }
        
        .listss li span:nth-child(2) {
            width: 50%;
            text-align: right;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="charge">
        <div class="newpayment">
            <div class="headertitles">
                <span style="display: block;font-size:42px;font-weight:bold;"><span style=" font-size: 12px; ">￥</span >{{items.money}}<span style="font-size: 12px; ">元</span></span>
                <span style="display: block; font-size: 14px;">支付金额</span>
            </div>
            <ul class="listss " style="display: block;width:100%; ">
                <li>
                    <span>开通服务</span>
                    <span>视频开通</span>
                </li>
                <li>
                    <span>开通类型</span>
                    <span>开通</span>
                </li>
                <li v-if="items.child" v-for='item in items.child'>
                    <span>开通班级</span>
                    <span>{{item.class_name}}</span>
                </li>
                <li>
                    <span>有效期</span>
                    <span>一个月</span>
                </li>
            </ul>
        </div>
        <div class="chagreheight" style="background: #f2f2f2;">
            <div class="chargeContent" style="padding: 20px;">
                <div class="chargeshadow">
                    <!-- <ul class="paytop">
                        <li>开通服务<span class="fr">视频开通</span></li>
                        <li>开通类型<span class="fr">开通</span></li>
                        <li v-if="items.child" v-for='item in items.child'>开通班级<span class="fr">{{item.class_name}}</span></li>
                        <li>有效期<span class="fr">一个月</span></li>
                    </ul> -->
                    <!-- <div class="bg"><img src="../../../images/buy_03.png" /></div>
                    <div class="gold"><img src="../../../images/gold_03.jpg" /></div>
                    <div class="bgb"><img src="../../../images/buy2_06.png" /></div> -->
                    <div class="mui-table-view mui-segmented-control payUl">
                        <div class="mui-card">
                            <!-- <span class="paytitle">请选择支付方式</span> -->
                            <form class="mui-input-group" id="anzhuoBox">
                                <div class="mui-input-row mui-radio" id="alipay">
                                    <label style="line-height: inherit;">
											<img class="fl" src="../../../images/pay_zhifubao.png" />
											支付宝支付
											<input name="androidpay" type="radio" id="radio1" checked="checked" data-channel='alipay' />
										</label>
                                </div>
                                <div class="mui-input-row mui-radio" id="wxpay">
                                    <label style="line-height: inherit;">
										<img class="fl" src="../../../images/pay_weixin.png" />
										微信支付
										<input name="androidpay" type="radio" id="radio2" data-channel='wxpay'/>
										</label>
                                </div>
                            </form>
                            <!--form class="mui-input-group" id="applebox"> 
									<div class="mui-input-row mui-radio" id="apple">
										<label>苹果内购支付</label>
										<input name="applepay" type="radio" id="apple" checked="checked" />
									</div>
								</form-->
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
                <div class="patbtn" onclick="pay()">确认支付</div>
            </div>
        </div>
    </div>
    <script src="../../../js/jquery-1.8.3.min.js"></script>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/immersed.js"></script>
    <script>
        var pays = {};
        var uid = '';
        var state = '';
        var vipday = '';
        mui.plusReady(function() {
            // 获取支付通道
            plus.payment.getChannels(function(channels) {
                var content = document.getElementById('dcontent');

                for (var i in channels) {
                    var channel = channels[i];

                    if (channel.id == 'qhpay' || channel.id == 'qihoo') { // 过滤掉不支持的支付通道：暂不支持360相关支付
                        continue;
                    }
                    pays[channel.id] = channel;
                    checkServices(channel);
                }
            }, function(e) {
                console.log('获取支付通道失败：' + e.message);
            });
            state = app.getState();
            uid = state.userid;
            memberToken = state.memberToken;
            childid = state.childid
            mui.post(Apiurl+'index/member_info', {
                    uid: uid, 
                    memberToken: memberToken,
                    child_id:childid
              }, function(data) { 
              	//alert(data.money)
                    charge.items = data;
                }, 'json')
                /*if(mui.os.ios) {
                	document.getElementById('applebox').style.display = "block";
                } else {
                	document.getElementById('anzhuoBox').style.display = "block";
                }*/
        });

        //检测是否安装支付服务
        function checkServices(pc) {

            if (!pc.serviceReady) {
                var txt = null;
                switch (pc.id) {
                    case 'alipay':
                        txt = '检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
                        break;
                    default:
                        txt = '系统未安装“' + pc.description + '”服务，无法完成支付，是否立即安装？';
                        break;
                }
                plus.nativeUI.confirm(txt, function(e) {
                    if (e.index == 0) {
                        pc.installService();
                    }
                }, pc.description);
            }
        }

        var w = null;
        //童伴生产地址
        //var PAYSERVER = 'http://zhifu.dqbenxin.com?payid=';
        
        //童伴测试地址
        var PAYSERVER = 'http://zhifu.weidu168.com?payid=';
        // 支付
        function pay() {
            //判断系统类型
            if (mui.os.android || mui.os.ios) {
                //支付金额
                var amount = charge.items.money;
                //获取选中的支付方通道名
                var paychannel = document.getElementsByName("androidpay");
                for (var i = 0; i < paychannel.length; i++) {
                    if (paychannel[i].checked == true) {
                        paychannel = paychannel[i].getAttribute('data-channel');
                    }
                }
                //检查是否请求订单中
                if (w) return;
                var url = PAYSERVER;
                if (paychannel == 'alipay' || paychannel == 'wxpay') {
                    url += paychannel;
                } else {
                    plus.nativeUI.alert('当前环境不支持此支付通道！', null, '提示');
                    return;
                }

                var appid = plus.runtime.appid;

                url += '&uid=' + uid + '&total=' + amount+"&"+childid; 
                alert(url)
                w = plus.nativeUI.showWaiting();

                // 请求支付订单
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {

                    switch (xhr.readyState) {
                        case 4:
                            w.close();
                            w = null;
                            if (xhr.status == 200) {
                                var order = xhr.responseText;
                             
                                plus.payment.request(pays[paychannel], order, function(result) {
                                    plus.nativeUI.alert('支付成功：感谢您的支持。', function() {
                                        back();
                                        /*mui.toast('恭喜您获得'+amount+'积分')*/
                                        mui.fire(plus.webview.getWebviewById("monitor"), "pageflowrefresh");
                                        var wobj = plus.webview.getWebviewById("pcenter");
                                        wobj.reload(true);
                                    }, '通知');



                                }, function(e) {
                                    plus.nativeUI.alert('支付失败', null, '错误码：' + e.code);

                                });
                            } else {
                                plus.nativeUI.alert('获取订单信息失败！', null, '通知');
                            }
                            break;
                        default:
                            break;
                    }
                }
                xhr.open('GET', url);
                xhr.send();
            } else {
                return;
            }
        }
        /*
        $(function() {
        	$('.chagreheight').height($('.chargeContent').height())
        });
        */
        var charge = new Vue({
            el: '#charge',
            data: {
                items: []
            },
            methods: {

            }
        })
    </script>
</body>

</html>